import React, { useState, useEffect, FC } from "react";
import { RouterProvider } from "react-router-dom";
import router from "./router";
import { Button, ConfigProvider, Input, Space, theme as antdtheme } from "antd";
import { SunOutlined, MoonOutlined } from "@ant-design/icons";
import "./App.css";
import { I18nextProvider } from "react-i18next";
import i18n from "./language/i18n";

type Theme = 'light' | 'dark';
type AnimationState = 'idle' | 'expanding' | 'contracting';
interface CirclePosition {
  x: number;
  y: number;
}

const App: FC = () => {
  const [theme, setTheme] = useState<Theme>('light');
  const [animationState, setAnimationState] = useState<AnimationState>('idle');
  const [circlePosition, setCirclePosition] = useState<CirclePosition>({ x: 0, y: 0 });

  const handleThemeToggle = (e: React.MouseEvent<HTMLElement>) => {
    const { clientX, clientY } = e.nativeEvent;
    setCirclePosition({ x: clientX, y: clientY });
    setAnimationState('expanding');

    setTimeout(() => {
      setTheme(theme === 'dark' ? 'light' : 'dark');
      setAnimationState('contracting');
    }, 500);
  };

  useEffect(() => {
    if (animationState === 'contracting') {
      setTimeout(() => {
        setAnimationState('idle');
      }, 200);
    }
  }, [theme, animationState]);

  return (
    <div className="app-container" style={{ position: "relative" }}>
      <div
        className={`theme-transition-circle ${animationState}`}
        style={{
          left: `${circlePosition.x}px`,
          top: `${circlePosition.y}px`,
          backgroundColor: theme === 'dark' ? '#141414' : '#ffffff',
        }}
      ></div>

      <ConfigProvider
        theme={{
          algorithm:
            theme === 'dark'
              ? antdtheme.darkAlgorithm
              : antdtheme.defaultAlgorithm,
        }}
      >
        <Button
          className="theme-toggle-button"
          onClick={handleThemeToggle}
          style={{ float: "right" }}
        >
          {theme === 'dark' ? <SunOutlined /> : <MoonOutlined />}
        </Button>
        <I18nextProvider i18n={i18n}>
          <RouterProvider router={router} />
        </I18nextProvider>
      </ConfigProvider>
    </div>
  );
};

export default App;